<template>
  <div class="personal-center-mobile">
    <div class="header" :class="{ 'low': isLowHeader }">
      <!-- 菜单和私信 -->
      <div class="header-actions">
        <mu-button icon text-color="#fff" @click="setOpen(!open)">
          <mu-icon value="menu"></mu-icon>
        </mu-button>
        <!-- 进入私信 -->
        <mu-button icon text-color="#fff" @click="to('message-private')">
          <mu-badge v-if="unreadCount > 0" badge-class="small-badge" :content="`${unreadCount}`" circle color="secondary">
            <mu-icon value="email"></mu-icon>
          </mu-badge>
          <mu-icon v-else value="email"></mu-icon>
        </mu-button>
      </div>
      <!-- 头像 -->
      <div class="header-avatar">
        <mu-avatar class="header-avatar-avatar" :size="isLowHeader ? 60 : 80">
          <img :src="avatarUrl">
        </mu-avatar>
      </div>
      <!-- 姓名 -->
      <div class="header-name">
        <p class="header-name-realname">{{ user.realname }}</p>
      </div>
    </div>

    <!-- 用户信息 -->
    <match-parent scroll="y">
      <!-- 列表页 -->
      <div v-if="tab === 'index'">
        <mu-list>
          <mu-list-item button @click="tab = 'info'">
            <mu-list-item-action>
              <mu-icon value="list"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>详细信息</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button @click="tab = 'avatar'">
            <mu-list-item-action>
              <mu-icon value="account_circle"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>更换头像</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button @click="tab = 'password'">
            <mu-list-item-action>
              <mu-icon value="lock"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>修改密码</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>

          <mu-divider />
          <mu-list-item button :to="{ name: 'question-mine' }">
            <mu-list-item-action>
              <mu-icon value="grade"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>我出的题</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :to="{ name: 'exam-all' }">
            <mu-list-item-action>
              <mu-icon value="done"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>我做的题</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>

          <mu-divider />
          <mu-list-item button :to="{ name: 'message-board' }">
            <mu-list-item-action>
              <mu-icon value="feedback"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>使用反馈</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>
      </div>

      <!-- 详细信息 -->
      <div v-else-if="tab === 'info'">
        <mu-list text-line="two-line">
          <mu-list-item button @click="tab = 'index'">
            <mu-list-item-title>返回</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_left"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>

        <!-- 基本资料 -->
        <mu-divider />
        <mu-list>
          <mu-sub-header>基本资料</mu-sub-header>
          <mu-list-item button :ripple="false">
            <mu-list-item-title>ID</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>{{ user.id }}</mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="false">
            <mu-list-item-title>用户名</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>{{ user.username }}</mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="false">
            <mu-list-item-title>真实姓名</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>{{ user.realname }}</mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item v-if="!user.is_active" button :ripple="false">
            <mu-list-item-title>用户状态</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>
                <mu-badge content="不可用" color="error"></mu-badge>
              </mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item v-if="user.is_superadmin" button :ripple="false">
            <mu-list-item-title>特殊权限</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>管理员</mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>

          <mu-list-item button :ripple="false">
            <mu-list-item-title>权限组</mu-list-item-title>
            <mu-list-item-action>
              <mu-list-item-sub-title>{{ roleText }}</mu-list-item-sub-title>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>

        <!-- 注册登录时间 -->
        <mu-divider />
        <mu-list text-line="two-line">
          <mu-sub-header>注册登录时间</mu-sub-header>
          <mu-list-item button :ripple="false">
            <mu-list-item-content>
              <mu-list-item-title>注册时间</mu-list-item-title>
              <mu-list-item-sub-title>{{ toDatetimeString(user.register_at) }}</mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button :ripple="false">
            <mu-list-item-content>
              <mu-list-item-title>最后登录</mu-list-item-title>
              <mu-list-item-sub-title>{{ toDatetimeString(user.last_login_at) }}</mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>

        <mu-divider />
        <p class="tips">如果信息有误，请联系管理员修改。</p>
      </div>

      <!-- 更换头像 -->
      <div v-else-if="tab === 'avatar'">
        <mu-list text-line="two-line">
          <mu-list-item button @click="tab = 'index'">
            <mu-list-item-title>返回</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_left"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>

        <mu-divider />
        <avatar-uploader @refresh="refreshAvatar()" />
      </div>

      <!-- 修改密码 -->
      <div v-else-if="tab === 'password'">
        <mu-list text-line="two-line">
          <mu-list-item button @click="tab = 'index'">
            <mu-list-item-title>返回</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_left"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>

        <mu-divider />
        <change-password class="action-item" @refresh="tab = 'index'" />
      </div>
    </match-parent>

    <!-- 登出 -->
    <!-- <div class="logout-box">
      <mu-button color="error" @click="handleLogout()">登出</mu-button>
    </div> -->
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import defaultAvatar from '@/assets/default_avatar.jpg'
import { parseTime } from '@/util'
import MatchParent from '@/components/MatchParent'
import AvatarUploader from './AvatarUploader'
import ChangePassword from './ChangePassword'
import api from '@/api'

export default {
  name: 'PersonalCenterMobile',
  components: {
    MatchParent,
    AvatarUploader,
    ChangePassword
  },
  data() {
    return {
      tab: 'index'
    }
  },
  computed: {
    ...mapGetters({
      open: 'phoneAsideDrawer',
      user: 'currentUser',
      roles: 'roles',
      privateMessageCount: 'privateMessageCount'
    }),
    roleText() {
      const code = this.user.role
      if (code === 0) {
        return '无隶属'
      } else {
        const role = this.roles.find(it => it.id === code)
        return role ? role.text : '未知组'
      }
    },
    avatarUrl() {
      const user = this.user
      return user.avatar ? user.avatar_url : defaultAvatar
    },
    isLowHeader() {
      return this.tab === 'password' || this.tab === 'avatar'
    },
    unreadCount() {
      return this.privateMessageCount.received_count - this.privateMessageCount.read_count
    }
  },
  methods: {
    ...mapMutations({
      setOpen: 'SET_PHONE_ASIDE_DRAWER',
      setCurrentUser: 'SET_CURRENT_USER'
    }),
    ...mapActions({
      logout: 'logout'
    }),
    // 更新用户信息
    async refreshUser() {
      try {
        const user = await api.getCurrentUser()
        this.setCurrentUser(user)
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    async refreshAvatar() {
      await this.refreshUser()
      this.tab = 'index'
    },
    toDatetimeString(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    // 登出
    async handleLogout() {
      try {
        await this.logout()
        this.$toast.success('登出成功')
        this.$router.push({ name: 'login-page' })
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    to(name) {
      this.$router.push({ name }).catch(() => {})
    }
  }
}
</script>

<style>
.personal-center-mobile .small-badge {
  width: 16px;
  height: 16px;
  top: -6px;
  right: -6px;
  font-size: 9px;
}
</style>

<style scoped>
.personal-center-mobile {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.header {
  width: 100%;
  height: 220px;
  background: url('~@/assets/personal_center_mobile.png');
  background-size: cover;
  background-position: center center;
  transition: height 0.4s;
}
.header.low {
  height: 150px;
}
.header-actions {
  display: flex;
  justify-content: space-between;
}
.header-avatar,
.header-name {
  display: flex;
  justify-content: center;
}
.header-avatar-avatar {
  transition: width 0.4s, height 0.4s;
}
.header-name-realname {
  margin-top: 12px;
  box-sizing: border-box;
  text-align: center;
  background:#1e88e5;
  padding: 4px 16px;
  border-radius: 4px;
  color: #fff;
  transition: margin-top 0.4s, padding 0.4s;;
}
.low .header-name-realname {
  margin-top: 6px;
  padding: 2px 16px;
}

.logout-box {
  display: flex;
  flex-flow: column nowrap;
  padding: 8px;
}
.tips {
  padding: 12px;
  text-align: center;
}
</style>
